<template>
	<view class="feedback-wrap">
		<view class="feedback-box">
			<textarea class="feedback-textarea" v-model="content" placeholder="请输入您的宝贵意见或建议：（300字以内）" maxlength="300" />
		</view>
		<view class="img-list-box">
			<view class="img-item" v-for="(item, i) in urls" :key="i">
				<image class="img-full" :src="item"></image>
			</view>
		</view>
		<view class="pictures" v-if="urls.length < 5">
			<view class="pictures-icon" @click="uploadFileImg">
				<image class="img-full" src="@/static/user/addPicture.png"></image>
			</view>
			<view class="pictures-text">
				上传照片
			</view>
		</view>
		<view class="img-box">
			
		</view>
		<view class="prompt-tetx">
			欢迎您为我们提出宝贵的意见和建议，您留下的<br>
			任何信息，都将用来改善我们的软件。
		</view>
		<view class="bottom-but">
			<view class="submit-but" @click="submitData">
				提交
			</view>
		</view>
	</view>
</template>

<script>
	import {uploadFile} from '@/utils/request.js'
	export default {
		data() {
			return {
				content: '',
				urls: [],
				imgOssId: []
			}
		},
		methods: {
			uploadFileImg() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						console.log(JSON.stringify(res.tempFilePaths));
						console.log(res.tempFilePaths[0])
						uni.showLoading({
							title: '正在上传...'
						})
						uploadFile('upload',res.tempFilePaths[0]).then(res => {
							console.log('请求成功', res.data.url)
							uni.hideLoading()
							if(res.data.url) {
								this.urls.push(res.data.url)
								this.imgOssId.push(res.data.ossId)
							}
						}).catch(e => {
							uni.hideLoading()
							console.log('请求失败', e)
							uni.showToast({
								title: e.msg || '服务器异常',
								icon: 'none'
							})
						})
					}
				});
			},
			submitData() {
				if(!this.content) {
					uni.showToast({
						title: "请输入建议内容",
						icon: "none",
						duration: 2000,
					});
					return;
				}
				uni.showLoading({
					title: '加载中...'
				})
				this.$request({
					url: this.$api.feedback,
					data: {
						feedbackContent: this.content,
						imgUrl: this.urls.join(','),
						imgOssId: this.imgOssId.join(',')
					},
					successCb: (res) => {
						console.log('请求成功', res)
						uni.hideLoading();
						uni.navigateBack()
						uni.showToast({
							title: res.msg||'提交成功',
							icon: "none",
							duration: 2000,
						});
					},
					failCb(e) {
						uni.hideLoading();
						console.log(e);
						uni.showToast({
							title: e.data.msg||'服务器异常',
							icon: "none",
							duration: 2000,
						});
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.feedback-wrap {
		padding: 0 24rpx;
		border-top: 1rpx solid #fff;
	}
.feedback-box {
	margin-top: 72rpx;
}
.feedback-textarea {
	width: 100%;
	height: 394rpx;
	background: #F4F5F7;
	border-radius: 16rpx;
	padding: 16rpx 24rpx;
	box-sizing: border-box;
	margin: 0 auto;
}
.img-list-box {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	.img-item {
		width: 112rpx;
		height: 112rpx;
		margin-top: 24rpx;
		margin-right: 24rpx;
	}
}
.pictures {
	display: flex;
	align-items: center;
	margin-top: 44rpx;
	.pictures-icon {
		width: 112rpx;
		height: 112rpx;
	}
	.pictures-text {
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: rgba(0,0,0,0.8);
		margin-left: 32rpx;
	}
}
.img-box {
	min-height: 400rpx;
}
.prompt-tetx {
	text-align: center;
	font-size: 28rpx;
	font-family: PingFang SC, PingFang SC;
	font-weight: 500;
	color: rgba(0,0,0,0.4);
	margin-top: 30rpx;
}
.bottom-but {
	position: fixed;
	bottom: 0%;
	left: 0;
	width: 100%;
	height: 200rpx;
	padding: 32rpx 64rpx;
	box-sizing: border-box;
	background-color: #fff;
	box-shadow: 0rpx 0rpx 16rpx 2rpx rgba(51,51,51,0.2);
	.submit-but {
		width: 622rpx;
		height: 88rpx;
		background: #EE5953;
		border-radius: 16rpx;
		font-size: 34rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 88rpx;
		text-align: center;
	}
}
</style>
